<!--  指令用法示例 -->
<template>
  <div class="container">
    <!-- v-autofocus 全局指令 -->
    <el-input v-model="name" v-autofocus placeholder="请输入内容" style="width: 300px;"></el-input>
    <div class="tags">
      <span v-tag="'秒杀'"></span> |
      <span v-tag:blue="'热门'"></span> |
      <span v-tag:green.modifier="'最新'"></span>
    </div>
    <div>
      <el-button v-forbidden="false" @click="onClick">提示信息</el-button>
      <el-button v-forbidden="true" @click="onClick">提示信息 - 被禁用</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Directive',
  directives: {
    // 自定义指令: 标签 v-tag
    tag: {
      bind(el, binding, vnode, oldVnode) {
        const { arg = 'red', value = '', modifiers } = binding;
        el.innerHTML = value;
        el.className = 'directive-tag';
        el.style.fontSize = '12px';
        el.style.color = '#fff';
        el.style.backgroundColor = arg;
        el.style.padding = '2px 4px';
        el.style.borderRadius = '2px';
        console.log('修饰符 modifier :>> ', modifiers.modifier);
        console.info('el :>> ', el);
        console.warn('binding :>> ', binding);
        console.error('vnode :>> ', vnode);
        console.log('oldVnode :>> ', oldVnode);
      },
    },
  },
  data() {
    return {
      name: '',
    };
  },
  created() {
  },
  methods: {
    onClick() {
      this.$message.success('提示信息');
    },
  },
};
</script>

<style lang="scss" scoped>
.tags {
  padding: 20px 0;
}
</style>
